<template>
<div>

    <van-nav-bar title="会议室申请" left-text="返回" right-text="提交" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />

    <tabbar title="会议室申请"></tabbar>
    <van-form @submit="onSubmit">
        <van-field name="id" v-model="id" label="申请单号" readonly />
        <van-field name="applyTime" v-model="applyTime" label="申请时间" readonly />
        <van-field name="applyPern" v-model="applyPern" label="申请人" readonly />
        <van-field name="applyDept" v-model="applyDept" label="申请部门" readonly />
        <van-row>
            <van-col span="24">
                <van-field v-model="meetingName" name="meetingName" label="会议主题" placeholder="会议主题" :rules="[{ required: true, message: '请填写会议主题' }]" />
            </van-col>

        </van-row>

        <div class="team">
            <van-field readonly name="meetingRoom" clickable label="会议室" :value="value1" placeholder="选择会议室" @click="mqinAi1" />
            <div v-if="myIf1">
                <van-popup v-model="showPicker" position="bottom">
                    <van-picker title="请选会议室" show-toolbar :columns="columns1" @cancel="showPicker = false" @confirm="onConfirm1" />
                </van-popup>
            </div>
        </div>

        <van-cell-group>
            <van-field name="starttime" v-model="starttime" clearable label="开始时间" placeholder="请输入开始时间" @focus="start" />
            <van-field name="endtime" v-model="endtime" clearable label="结束时间" placeholder="请输入结束时间" @focus="end" />
        </van-cell-group>
        <!-- 开始时间控件 -->
        <van-popup v-model="show" position="bottom">
            <van-datetime-picker v-model="currentDate" type="datetime" :min-date="minDate" :max-date="maxDate" @confirm="confirm" @cancel="cancel" :formatter="formatter" />
        </van-popup>

        <!-- 结束时间控件 -->
        <van-popup v-model="show1" position="bottom">
            <van-datetime-picker v-model="currentDate1" type="datetime" :min-date="minDate" :max-date="maxDate" @confirm="confirm1" @cancel="cancel1" :formatter="formatter" />
        </van-popup>

        <van-cell-group aria-label="15">
            <van-field name="peoperNumber" label="参加人数" v-model="peoperNumber" placeholder="请输入参加人数" type="digit" />
        </van-cell-group>

        <div class="group-leader flexbox">
            <van-field readonly name="meetingType" clickable label="会议类型" :value="value2" placeholder="选择会议类型" @click="mqinAi2" />
            <div v-if="myIf2">
                <van-popup v-model="showPicker" position="bottom">
                    <van-picker title="请选择会议类型" show-toolbar :columns="columns2" @cancel="showPicker = false" @confirm="onConfirm2" />
                </van-popup>
            </div>
        </div>

        <van-cell-group aria-label="15">
            <van-field name="hostUnit" label="主办单位" v-model="hostUnit" placeholder="请输入主办单位" />
        </van-cell-group>
        <div>
            <van-field readonly name="inResroom" clickable label="室内资源" v-model="inResroom" placeholder="选择室内资源" @click="mqinAi3" />
            <van-dialog v-model="showPicker1" title="室内资源" show-cancel-button>
                <van-field name="inResroom">
                    <template #input>
                        <van-checkbox-group v-model="inResroom" direction="horizontal">
                            <van-checkbox name="0" shape="square">茶水</van-checkbox>
                            <van-checkbox name="1" shape="square">音响</van-checkbox>
                            <van-checkbox name="2" shape="square">投影</van-checkbox>
                            <van-checkbox name="3" shape="square">座位牌</van-checkbox>
                            <van-checkbox name="4" shape="square">座椅</van-checkbox>
                            <van-checkbox name="5" shape="square">录音</van-checkbox>
                            <van-checkbox name="6" shape="square">会议室内字幕</van-checkbox>
                        </van-checkbox-group>
                    </template>
                </van-field>
            </van-dialog>
        </div>
        <div>
            <van-field readonly name="outResroom" clickable label="室外资源" v-model="outResroom" placeholder="选择室外资源" @click="mqinAi4" />
            <van-dialog v-model="showPicker2" title="室外资源" show-cancel-button>
                <van-field name="outResroom">
                    <template #input>
                        <van-checkbox-group v-model="outResroom" direction="horizontal">
                            <van-checkbox name="0" shape="square">大堂大屏</van-checkbox>
                            <van-checkbox name="1" shape="square">二楼电梯口小屏</van-checkbox>
                        </van-checkbox-group>
                    </template>
                </van-field>
            </van-dialog>
        </div>
        <div style="margin: 16px;">
            <!-- <van-button round block type="info" native-type="submit">
                提交
            </van-button> -->
            <van-button round block type="info" @click="handleSumbit">
                提交
            </van-button>
        </div>
    </van-form>
</div>
</template>

<script>
import {
    ADD_FILE_TYPE
} from '@/api/fy';
export default {
    name: '',
    components: {},
    props: {},
    data() {
        return {
            id: '000',
            applyTime: "",
            applyPern: "",
            applyDept: "",
            myIf1: false,
            myIf2: false,

            value1: '',
            value2: '',

            showPicker: false,
            showPicker1: false,
            showPicker2: false,
            columns1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
            columns2: ['常委会领导参会', '主任会议', '常委会议'],
            hostUnit: "",
            peoperNumber: "",
            inResroom: [],
            outResroom: [],
            show: false, //开始时间弹窗
            show1: false, //结束时间弹窗
            minHour: 10,
            maxHour: 20,
            minDate: new Date(),
            maxDate: new Date(2020, 11, 31),
            currentDate: new Date(), //开始标准时间
            currentDate1: new Date(), //结束标准时间
            starttime: "", //开始时间
            starttime1: "", //开始时间时间戳
            endtime: "", //结束时间
            endtime1: "", //结束时间时间戳

            meetingName: '',
        };
    },
    created() {
        this.applyPern = sessionStorage.getItem("account")
        this.applyTime = this.currentDate.getFullYear() +
            "年" +
            (Number(this.currentDate.getMonth()) + 1) +
            "月" +
            this.currentDate.getDate() +
            "日 " +
            this.currentDate.getHours() +
            ":" +
            this.currentDate.getMinutes();
        // this.applyTime = new Date(this.currentDate).getTime() / 1000;
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);//返回上一层
        },
        onClickRight() {
           
        },
        handleSumbit() {
            const obj = {
                name: this.name
            }

            ADD_FILE_TYPE(obj).then(res => {

            })

        },

        onConfirm1(e) {
            this.value1 = e
            this.showPicker = false
        },
        onConfirm2(e) {
            this.value2 = e
            this.showPicker = false
        },
        onConfirm3(e) {
            this.value3 = e
            this.showPicker = false
        },
        mqinAi1() {
            this.myIf1 = true
            this.myIf2 = false
            this.myIf3 = false
            this.myIf4 = false
            this.myIf5 = false
            this.showPicker = true
        },
        mqinAi2() {
            this.myIf1 = false
            this.myIf2 = true
            this.myIf3 = false
            this.myIf4 = false
            this.myIf5 = false
            this.showPicker = true
        },
        mqinAi3() {
            this.myIf1 = false
            this.myIf2 = false
            this.myIf3 = true
            this.myIf4 = false
            this.myIf5 = false
            this.showPicker1 = true
        },
        mqinAi4() {
            this.myIf1 = false
            this.myIf2 = false
            this.myIf3 = false
            this.myIf4 = true
            this.myIf5 = false

            this.showPicker2 = true
        },

        mqinAi5() {
            this.myIf1 = false
            this.myIf2 = false
            this.myIf3 = false
            this.myIf4 = false
            this.myIf5 = true
            this.showPicker = true
        },

        onSubmit(values) {
            console.log('submit', values);
        },
        start() {
            this.show = true;
        },
        // 选择结束时间
        end() {
            this.show1 = true;
        },
        // 点击确定
        confirm() {
            this.show = false;
            this.starttime =
                this.currentDate.getFullYear() +
                "年" +
                (Number(this.currentDate.getMonth()) + 1) +
                "月" +
                this.currentDate.getDate() +
                "日 " +
                this.currentDate.getHours() +
                ":" +
                this.currentDate.getMinutes();
            this.starttime1 = new Date(this.currentDate).getTime() / 1000;
        },
        // 点击取消
        cancel() {
            this.show = false;
        },
        confirm1() {
            this.show1 = false;
            this.endtime =
                this.currentDate1.getFullYear() +
                "年" +
                (Number(this.currentDate1.getMonth()) + 1) +
                "月" +
                this.currentDate1.getDate() +
                "日 " +
                this.currentDate1.getHours() +
                ":" +
                this.currentDate1.getMinutes();
            this.endtime1 = new Date(this.currentDate1).getTime() / 1000;
        },
        cancel1() {
            this.show1 = false;
        },
        // 处理控件显示的时间格式
        formatter(type, value) {
            // 格式化选择器日期
            if (type === "year") {
                return `${value}年`;
            } else if (type === "month") {
                return `${value}月`;
            } else if (type === "day") {
                return `${value}日`;
            } else if (type === "hour") {
                return `${value}时`;
            } else if (type === "minute") {
                return `${value}分`;
            }
            return value;
        }
    },
};
</script>
